<template>
  <d2-container>
    <el-table :data="tableData" style="width: 100%" stripe size="mini" v-loading="loading">
      <el-table-column prop="buildingName" label="楼宇名称"></el-table-column>
      <el-table-column prop="buildingManager" label="管家名称"></el-table-column>
      <el-table-column prop="buildingManagerTel" label="管家联系方式"></el-table-column>
      <el-table-column prop="buildingFloor" label="总楼层"></el-table-column>
      <el-table-column prop="areaName" label="小区"></el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-button type="primary" plain size="mini" @click="onAddRule">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" plain @click="onUpdateRule(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="onDelRule(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.size" :current-page="page.index" @current-change="onPageChange"></el-pagination>
    </template>

    <dialogBuildingModify ref="dialogBuildingModify" @change="onUserChanged"></dialogBuildingModify>
  </d2-container>
</template>
<script>
import { mapActions } from "vuex";
import { PAGE_SIZE } from "@/const";
export default {
  mounted() {
   this.bindData() ;
  },
  data() {
    return {
      loading:false,
      tableData: [],
       page: {
        index: 1,
        total: 0,
        size: PAGE_SIZE
      }
    };
  },
 methods: {
 ...mapActions("pms/base.building", ["getBuildingPage", "deleteBuilding"]),
    onAddRule() {
      this.$refs.dialogBuildingModify.showDialog();
    },
    onUpdateRule(row) {
      this.$refs.dialogBuildingModify.showDialog(row);
    },
    onDelRule(row) {
      this.$confirm("确认删除该条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(row);
          this.deleteBuilding(row.id).then(() => {
            this.bindData();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onUserChanged() {
      this.bindData();
    },
    bindData() {
      this.loading = true;
      this.getBuildingPage({ page: this.page }).then(result => {
        this.tableData = result.data;
        this.page = result.page;
        this.loading = false;
      });
    },
    onPageChange(index) {
      this.page.index = index;
      this.bindData();
    }
  },
  components:{
    dialogBuildingModify:()=>import("./dialog-building-modify")
  }
};
</script>